<template>
  <el-form
    class="form"
    :model="reportState.form"
    :rules="rules"
    ref="ruleForm"
    label-width="11em"
    size="small"
  >
    <el-row>
      <el-col :span="10">
        <el-form-item label="报备人姓名：" prop="registrarName">
          <el-input maxlength="20" v-model="reportState.form.registrarName" placeholder="请输入报备人姓名"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="报备人电话：" prop="registrarPhone">
          <el-input
            size="small"
            maxlength="20"
            v-model="reportState.form.registrarPhone"
            placeholder="请输入报备人电话"
          ></el-input>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="14">
        <el-form-item label="竞价平台：" prop="purchasePlatformName">
          <el-select
            size="small"
            :value="projectState.projectId"
            disabled
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in projectSelectOption"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col> -->
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item label="项目编号：" prop="projectId">
          <el-input size="small" v-model="reportState.form.projectId" placeholder="请输入项目编号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="14">
        <el-form-item class="offerTime" label="报价截止时间：" prop="bidEndTime">
          <el-date-picker
            size="small"
            v-model="reportState.form.bidEndTime"
            :picker-options="{disabledDate: disabledEndDate}"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
          <div class="el-form-item__tip">（请与竞价平台的截止时间保持一致，否则将有可能拒绝报备）</div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>

      <el-col :span="22">
        <el-form-item label="报价链接：" prop="bidUrl">
          <el-input size="small" v-model="reportState.form.bidUrl" placeholder="请输入报价链接"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="备注：">
          <el-input
            :rows="5"
            type="textarea"
            placeholder="请输入内容"
            maxlength="100"
            show-word-limit
            v-model="reportState.form.remark"
            resize="none"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- <div style="text-align: right;">
      <el-button class="filing-button" type="primary" @click="clearInfo('ruleForm')">清 空</el-button>
    </div>-->
  </el-form>
</template>

<script>
import { defineComponent, getCurrentInstance } from '@vue/composition-api'
import { useReport } from '@/hooks/report'
import { useProjectCustomerSetting } from '@/hooks/project'
export default defineComponent({
  setup () {
    const vm = getCurrentInstance()
    const validateForm = async () => {
      return new Promise(resolve => {
        vm.$refs.ruleForm.validate(valid => {
          valid && resolve(true)
        })
      })
    }
    const { reportState } = useReport(validateForm)

    const rules = {
      registrarName: [{ required: true, message: '请输入报备人姓名', trigger: 'blur' }],
      // purchasePlatformName: [{ required: true, message: '请选择平台', trigger: 'change' }],
      registrarPhone: [{ required: true, message: '请输入报备人电话', trigger: 'blur' }],
      projectId: [{ required: true, message: '请输入项目编号', trigger: 'blur' }],
      bidUrl: [{ required: true, message: '请输入报价链接', trigger: 'blur' }],
      bidEndTime: [{
        required: true,
        trigger: 'change',
        validator (rule, value, callback) {
          const time = Date.now() + 3 * 60 * 60 * 1000 // 当前时间后3小时
          value = new Date(value)
          if (value.getTime() < time) {
            callback(new Error('竞价报备时间过短，无法提交'))
          } else {
            callback()
          }
        },
      }],
    }

    const disabledEndDate = date => {
      return Date.now() > date.getTime() + 60 * 60 * 24 * 1000
    }

    const { projectSelectOption, state: projectState } = useProjectCustomerSetting()
    console.log('projectSelectOption', projectSelectOption.value.length)

    return {
      reportState,
      rules,
      disabledEndDate,
      projectSelectOption,
      projectState,
    }
  },
})
</script>

<style lang="scss" scoped>
.form {
  width: 90%;
  margin: 0 auto;
  .el-row {
    margin-bottom: 10px;
  }
  .el-form-item__tip {
    color: #666;
    // color: #F56C6C;
    font-size: 12px;
    line-height: 1;
        padding-top: 2px;
    position: absolute;
    top: 100%;
    left: 0;
  }
  .is-error .el-form-item__tip{
    display: none;
  }
}
</style>
